<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>SparkleShare Event Log</title>
        
        <script type="text/javascript"><!-- $jquery --></script>
        <script type="text/javascript">
          $(document).ready(function () {
              $('dl dd:nth-child(-n+10)').css('display', 'block');
              $('.day-entry-content .event-entry:last-child').css('border', 'none');
            
              $('a').not('.show').click(function (event) {
                  window.external.LinkClicked($(this).attr("href"));
                  event.preventDefault();
              });

              // Update the Today and Yesterday labels after midnight
              var midnight_interval = setInterval (function(){
                var date = new Date();

                if ((date.getTime() / 1000) >= <!-- $midnight -->) {
                  $("#today").html($("#today").attr("name"));
                  $("#yesterday").html($("#yesterday").attr("name"));

                  clearInterval(midnight_interval);
                }
              }, 60 * 1000);

              // Hide the 'Show all' link when there are fewer than 10 events
              $('.show').each (function () {
                var entry_count = $(this).parent ().find ('dl').children ().length;

                if (entry_count > 10)
                  $(this).html ('Show all ' + entry_count);
                else
                  $(this).hide ();
              });

              // When 'Show all' is clicked, show all collapsed events
              $('.show').click(function () {
                 $(this).parent ().find ('dl').children ().show ();
                 $(this).hide ();
              });
          });
        </script>

        <style>
            * {
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            body {
                background-color: #fefefe;
                color: <!-- $body-color -->;
                font-size: <!-- $body-font-size -->;
                font-family: -apple-system, "<!-- $body-font-family -->";
                margin: 0;
                -webkit-user-select: none;
                overflow-x: hidden;
            }

            a {
                color: <!-- $a-color -->;
                text-decoration: none;
                outline: 0;
            }
            
            a.show {
                font-size: 80%;
            }

            a:hover {
                color: <!-- $a-hover-color -->;
                text-decoration: underline;
                cursor: pointer;
            }
            
            small, small a, small a:hover {
                font-size: <!-- $small-font-size -->;
                color: <!-- $secondary-font-color -->;
            }
            
            dl {
                padding : 6px 0 0 0;
                margin: 6px 0 9px 0;
                table-layout: fixed;
            }
            
            dd {
                display: none;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 90%;
                padding: 0 0 1px 20px;
                margin: 0 0 4px 0;
                background-repeat: no-repeat;
                background-position: center left;
            }

            .day-entry-header {
                color: #aaa;
                margin-left: 32px;
                padding-top: 22px;
                font-weight: bold;
            }
            
            .history-header {
                color: #aaa;
                padding-top: 22px;
                float: left;
                width: 90%;
                margin-left: 32px;
                margin-right: 32px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .event-entry {
                padding: 0 14px 0 64px;
                margin: 28px 32px 28px 32px;
                background-repeat: no-repeat;
                background-position: 36px 24px;
                min-height: 48px;
            }
            
            .event-user-name {
                font-weight: bold;
            }
            
            .event-avatar {
                width: 48px;
                height: 48px;
                border-radius: 4px;
                position: absolute;
                left: 32px;
            }

            .event-folder a {
                color: <!-- $secondary-font-color -->;
                font-size: 80%;
            }

            .separator {
                border-bottom: 1px #ccc solid;
                margin: 24px 0 24px 0;
            }

            dd small {
                display: inline-block;
                width: 36px;
            }

            .added {
                background-image: url('<!-- $document-added-background-image -->');
            }

            .deleted {
                background-image: url('<!-- $document-deleted-background-image -->');
            }

            .edited {
                background-image: url('<!-- $document-edited-background-image -->');
            }

            .moved {
                background-image: url('<!-- $document-moved-background-image -->');
            }
            
            table {
                width: 100%;
            }
            
            .table-wrapper {
                padding: 64px 32px;
            }
            
            td {
              padding: 0;
              margin: 0;
            }
            
            td.name {
                font-weight: bold;
                width: 45%;
            }           
            
            td.time {
                color: <!-- $secondary-font-color -->;
                padding-right: 9px;
                font-size: <!-- $small-font-size -->;
            }
            
            td.date {
                color: <!-- $secondary-font-color -->;
                text-align: right;
                padding-right: 6px;
                font-size: <!-- $small-font-size -->;
            }  
            
            td.restore {
                text-align: right;
                font-size: <!-- $small-font-size -->;
            }
            
            td.avatar {
                width: 32px;
            }
            
            td.avatar img {
                margin-top: 2px;
                border-radius: 3px;
                width: 24px;
                height: 24px;
            }
        </style>
    </head>
    <body oncontextmenu="return false;">
        <!-- $event-log-content -->
    </body>
</html>
